﻿<!DOCTYPE html>
<!--[if IE 9]>         <html class="ie9 no-focus" lang="zh"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-focus" lang="zh"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <title>调试</title>

    <meta name="description" content="">
    <meta name="author" content="caiweiming">
    <meta name="robots" content="noindex, nofollow">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=0">




    <!-- Stylesheets -->
    <!-- Page JS Plugins CSS -->
                <link rel="stylesheet" href="__STATIC__/libs/jcrop/css/Jcrop.min.css">            <link rel="stylesheet" href="__STATIC__/libs/select2/select2.min.css"><link rel="stylesheet" href="__STATIC__/libs/select2/select2-bootstrap.min.css">            <link rel="stylesheet" href="__STATIC__/libs/webuploader/webuploader.css">
    

    <!-- Bootstrap and OneUI CSS framework -->

    <link rel="stylesheet" href="__STATIC__/libs/sweetalert/sweetalert.min.css">
    <link rel="stylesheet" href="__STATIC__/libs/magnific-popup/magnific-popup.min.css">
    <link rel="stylesheet" href="__STATIC__/admin/css/bootstrap.min.css">
    <link rel="stylesheet" href="__STATIC__/admin/css/oneui.css">
    <link rel="stylesheet" href="__STATIC__/admin/css/dolphin.css" id="css-main">

    <link rel="stylesheet" id="css-theme" href="__STATIC__/admin/css/themes/default.min.css">

    <!--页面css-->
    
    
    
        <!-- END Stylesheets -->

    <!--插件css钩子-->

    <!--自定义css-->
    <link rel="stylesheet" href="__STATIC__/admin/css/custom.css">
    <script>
        // url
        var dolphin = {
            'jcrop_upload_url': '/admin.php/admin/attachment/upload/dir/images/from/jcrop/module/news.html',
            'ueditor_upload_url': '/admin.php/admin/attachment/upload/dir/images/from/ueditor/module/news.html',
            'ckeditor_img_upload_url': '/admin.php/admin/attachment/upload/dir/images/from/ckeditor/module/news.html',
            'WebUploader_swf': '__STATIC__/libs/webuploader/Uploader.swf',
            'file_upload_url': '/admin.php/admin/attachment/upload/dir/files/module/news.html',
            'image_upload_url': '/admin.php/admin/attachment/upload/dir/images/module/news.html',
            'upload_check_url': '/admin.php/admin/ajax/check.html',
            'get_level_data': '/admin.php/admin/ajax/getleveldata.html',
            'quick_edit_url': '/admin.php/cms/content/quickedit.html',
            'triggers': [], // 触发器集合
            'field_hide': '', // 需要隐藏的字段
            'field_values': '',
            'validate': '', // 验证器
            'validate_fields': '', // 验证字段
            'search_field': '', // 搜索字段
            // 字段过滤
            '_filter': '',
            '_filter_content': '',
            '_field_display': '',
            '_field_clear': [],
            'get_filter_list': '/admin.php/admin/ajax/getfilterlist.html',
            'curr_url': '/admin.php/cms/content/edit/id/18.html',
            'curr_params': {"id":"18"},
            'layer': {"type":2,"area":["80%","90%"],"shadeClose":true,"isOutAnim":false,"anim":-1}        };
    </script>
</head>
<body>
<!-- Page Container -->

    <!-- Main Container -->
    <main id="main-container">
        <!-- Page Header -->
        
       
        
        <!-- END Page Header -->

        <!-- Page Content -->
        <div class="content">
            
             
            
            
 
                                                                                





 <div class="form-group col-md-12 col-xs-12 cut_pic" >
    <label class="col-xs-12" for="title">截图</label>
	<div class="col-sm-12">
                <a class="img-link" href="/public/"> <img class="thumbnail" src="/public/uploads/images/20180202/7a89414e20db8d7c5c13eeb890362d08.jpg" width="100" /></a>
				 <span class="cut_img_btn">点击截图</span>
    </div>
	
    <input type="text" class="js-jcrop-cut-info" value="">
    <input type="file" class="hidden js-jcrop-file" accept="image/jpg,image/jpeg,image/bmp,image/png,image/gif" value="">
    <input type="text" class="js-jcrop-input" id="picurl" name="picurl" value="">
			  <!-- Pop In Modal -->
			  <div class="modal modal-popin fade" tabindex="-1" role="dialog" aria-hidden="true">
				<div class="modal-dialog modal-lg modal-dialog-popin">
				  <div class="modal-content">
					<div class="block block-themed block-transparent remove-margin-b">
					  <div class="block-header bg-primary-dark">
						<ul class="block-options">
						  <li>
							<button data-dismiss="modal" type="button">
							  <i class="si si-close"></i>
							</button>
						  </li>
						</ul>
						<h3 class="block-title">图片裁剪</h3></div>
					  <div class="block-content push-20">
						<div class="jcrop-preview-parent">
						  <img src="" class="jcrop-preview" /></div>
						<div class="jcrop-img">
						  <img src="{$picurl}" data-id="" data-options='{$opt}' class="js-jcrop"  alt=""></div>
					  </div>
					</div>
					<div class="modal-footer">
					  <span class="pull-left">在图片上拖动鼠标，选择裁剪选区，然后点击“
						<strong>立即裁剪</strong>”按钮</span>
					  <button class="btn btn-sm btn-default" type="button" data-dismiss="modal">关闭</button>
					  <button class="btn btn-sm btn-primary js-jcrop-cut-btn" type="button">
						<i class="fa fa-cut"></i>立即裁剪</button>
					</div>
				  </div>
				</div>
			  </div>
			  <!-- END Pop In Modal -->
</div>

 
                                        
                                           
                           

<!-- END Page Container -->



<!-- OneUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock, Appear, CountTo, Placeholder, Cookie and App.js -->

<script src="__STATIC__/js/core/jquery.min.js"></script>
<script src="__STATIC__/js/core/bootstrap.min.js"></script>
<script src="__STATIC__/js/core/jquery.slimscroll.min.js"></script>
<script src="__STATIC__/js/core/jquery.scrollLock.min.js"></script>
<script src="__STATIC__/js/core/jquery.appear.min.js"></script>
<script src="__STATIC__/js/core/jquery.countTo.min.js"></script>
<script src="__STATIC__/js/core/jquery.placeholder.min.js"></script>
<script src="__STATIC__/js/core/js.cookie.min.js"></script>
<script src="__STATIC__/libs/magnific-popup/magnific-popup.min.js"></script>
<script src="__STATIC__/js/app.js"></script>
<script src="__STATIC__/js/dolphin.js"></script>
<script type="text/javascript">

jQuery(document).ready(function() {
    // 文件上传集合
    var webuploader = [];
    // 当前上传对象
    var curr_uploader = {};
    // editordm编辑器集合
    var editormds   = {};
    // ueditor编辑器集合
    var ueditors    = {};
    // wangeditor编辑器集合
    var wangeditors = {};
    // 当前图标选择器
    var curr_icon_picker;
    var layer_icon;

	$('.cut_pic').each(function(){
        var jcrop_api         = '';
        var $self             = $(this);
        var $jcrop            = $self.find('.js-jcrop');
        var $options          = ($jcrop.data('options')) || {aspectRatio:1};//
        var $jcrop_cut_btn    = $self.find('.js-jcrop-cut-btn');
        var $jcrop_upload_btn = $self.find('.js-jcrop-upload-btn');
        var $jcrop_file       = $self.find('.js-jcrop-file');
        var $jcrop_cut_info   = $self.find('.js-jcrop-cut-info');
        var $jcrop_preview    = $self.find('.jcrop-preview');
        var $jcrop_input      = $self.find('.js-jcrop-input');
        var $remove_picture   = $self.find('.remove-picture');
        var $thumbnail        = $self.find('.thumbnail');
        var $img_link         = $self.find('.img-link');
        var $modal            = $self.find('.modal-popin');
        var $pic_height       = '';
        // 设置预览图监听
        $options.onChange    = showPreview;
        $options.onSelect    = showPreview;
        $options.boxWidth    = 750;
        $options.boxHeight   = 750;
        $options.saveWidth   = $options.saveWidth || null;
        $options.saveHeight  = $options.saveHeight || null;
        $options.aspectRatio = $options.aspectRatio || ($options.saveWidth / $options.saveHeight);

//$self.find('.cut_img_btn').click(function(){
	
//});
		//$self.find('.cut_img_btn').click(function(){
			$modal.modal('show');
			$jcrop_preview.attr('src',$jcrop.attr('src'));			
			loadImage( $jcrop.attr('src') , function () {
				if (jcrop_api != ''){
						jcrop_api.destroy();
				}
				$jcrop.Jcrop($options, function () {
					jcrop_api   = this;
					$pic_height = Math.round(jcrop_api.getContainerSize()[1]);
					//$modal.modal('show');
				});
			});
		//});

		// 加载图片（用于判断图片是否加载完毕）
        function loadImage(url, callback) {
            var img = new Image(); //创建一个Image对象，实现图片的预下载
            img.src = url;

            if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
                callback.call(img);
                return; // 直接返回，不用再处理onload事件
            }
            img.onload = function () { //图片下载完毕时异步调用callback函数。
                callback.call(img);//将回调函数的this替换为Image对象
            };
        }

        // 实时显示预览图
        function showPreview(coords)
        {
            var ratio = coords.w / coords.h; // 选区比例
            var rx,ry;
            var preview_width  = '';
            var preview_height = '';

            if ((100 / ratio) > $pic_height) {
                preview_width  = $pic_height * ratio;
                preview_height = $pic_height;
            } else {
                preview_width  = 100;
                preview_height = 100 / ratio;
            }

            rx = preview_width / coords.w;
            ry = (preview_width / ratio) / coords.h;

            if (jcrop_api) {
                $jcrop_preview.css({
                    width: Math.round(rx * jcrop_api.ui.stage.width) + 'px',
                    height: Math.round(ry * jcrop_api.ui.stage.height) + 'px',
                    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                    marginTop: '-' + Math.round(ry * coords.y) + 'px'
                }).parent().css({
                    width: preview_width + 'px',
                    height: preview_height + 'px'
                });
            }

            var jcrop_info = [coords.w, coords.h, coords.x, coords.y, $options.saveWidth, $options.saveHeight];
            $jcrop_cut_info.val(jcrop_info.join(','));
        }

        // 关闭裁剪框
        $modal.on('hidden.bs.modal', function (e) {

            $jcrop_cut_info.val('');

			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
        });

        // 删除图片
        $remove_picture.click(function () {
            $(this).parent().hide();
            $jcrop_input.val('');
        });

        // 裁剪图片
        $jcrop_cut_btn.click(function () {
            var $cut_value = $jcrop_cut_info.val();
            if ($jcrop.attr('src') == '') {
                Dolphin.notify('请上传图片', 'danger');
                return false;
            }
            if ($cut_value != '') {
                var $data = {
                    path: $jcrop_preview.attr('src'),
					not_rename: 1,
                    cut: $cut_value
                };
                Dolphin.loading();
                $.ajax({
                    url: dolphin.jcrop_upload_url,
                    type: 'POST',
                    dataType: 'json',
                    data: $data
                })
                .done(function(res) {
                    Dolphin.loading('hide');
                    if (res.code == '1') {
                        $thumbnail.attr('src', res.thumb || res.src);
                        $jcrop_input.val(res.id);
                        $img_link.attr('href', res.src);
                        $jcrop_cut_info.val('');
                        $modal.modal('hide');
						var ckk = 0;
						$("img",window.parent.document).each(function(e){
							if($(this).attr('src')==res.src){
								ckk++;
								$(this).attr('src',res.src+'?'+Math.random())
							}
						});
						if(ckk==0){
							$(".img-link",window.parent.document).each(function(e){
								if($(this).attr('href')==res.src){
									$(this).find('img').attr('src',res.src+'?'+Math.random())
								}
							});
						}
						

						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
                    } else {
                        Dolphin.notify(res.msg, 'danger');
                    }
                })
                .fail(function(res) {
                    Dolphin.loading('hide');
                    Dolphin.notify($(res.responseText).find('h1').text() || '请求失败~', 'danger');
                });
            } else {
                Dolphin.notify('请选择要裁剪的大小', 'warning');
            }
        });

        // 查看大图
        $(this).magnificPopup({
            delegate: 'a.img-link',
            type: 'image',
            gallery: {
                enabled: true
            }
        });

	});

});
</script>
<script src="__STATIC__/js/builder/aside.js"></script>
<script src="__STATIC__/js/builder/table.js"></script>
<script src="__STATIC__/libs/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="__STATIC__/libs/sweetalert/sweetalert.min.js"></script>
<script src="__STATIC__/libs/js-xss/xss.min.js"></script>


<!-- Page JS Plugins -->
<script src="__STATIC__/libs/layer/layer.js"></script>
        <script src="__STATIC__/libs/jcrop/js/Jcrop.min.js"></script>        <script src="__STATIC__/libs/jquery-ui/jquery-ui.min.js"></script>        <script src="__STATIC__/libs/select2/select2.full.min.js"></script><script src="__STATIC__/libs/select2/i18n/zh-CN.js"></script>        <script src="__STATIC__/libs/webuploader/webuploader.min.js"></script>


<script>
    jQuery(function () {
        App.initHelpers(['appear', 'slimscroll', 'magnific-popup', 'table-tools']);
                App.initHelpers(["select2"]);
            });
</script>


</body>
</html>